<!-- 搜索框 -->
<template>
  <div class="wrapper">
    <div class="search-wrapper">
      <input v-model="search" class="searchInput" placeholder="搜索" type="text" @keyup="change">
      <i v-show="noText" class="icon iconfont icon-search" />
      <div v-show="haveText" class="searchInput-delete" @click="del" />
    </div>
    <i class="el-icon-s-comment create-group" @click="createGroup" />
    <myCreateGroup ref="AreateGroup" />
  </div>
</template>

<script>
import createGroup from '../dialog/createGroup'

export default {
  name: 'GroupSearch',
  components: {
    myCreateGroup: createGroup
  },
  data() {
    return {
      search: '',
      active: false
    }
  },
  computed: {
    noText() {
      if (this.search === '') return true
      return false
    },
    haveText() {
      if (this.search === '') return false
      return true
    }
  },
  methods: {
    change() {
      this.$store.dispatch('searchGroup', this.search)
    },
    del() {
      this.search = ''
      this.change()
    },
    createGroup() {
      debugger
      this.$refs.AreateGroup.changeStatus()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper
    padding: 22px 12px 12px 12px

  .search-wrapper
    position: relative
    display: flex
    box-sizing: border-box
    height: 26px
    width: 95%
    background-color: #e5e3e2
    border: 1px solid #d9d7d6
    border-radius: 2px

    .searchInput
      flex: 1
      font-size: 12px
      padding: 6px
      background-color: #e5e3e2
      outline: none

      &:focus
        background-color: #f2efee

    .icon-search
      display: inline-block
      width: 24px
      height: 24px
      font-size: 14px
      line-height: 24px
      text-align: center

    .searchInput-delete
      display: block
      position: absolute
      outline: none
      top: 0;
      right: 0;
      width: 24px
      height: 100%
      background-image: url(delete.png)
      background-size: 26px
      background-position: center
      background-repeat: no-repeat
      cursor: pointer
  .create-group
    cursor: pointer;
    float: right;
    margin-top: -20px;
    margin-right: -9px
</style>

